import React from 'react';
import { Icon } from 'react-fa';

const prefixCls = 'x-card';

export default class Card extends React.Component {
  renderTitle = title => {
    return <h2>{title}</h2>;
  };
  renderComponent = data => {
    const { children } = this.props;
    if (children) {
      return children;
    }

    return (
      <div className={`${prefixCls}-panel`}>
        <div className={`${prefixCls}-image`}>
          <Icon name={data.icon} />
        </div>
        <div className={`${prefixCls}-caption`}>{data.name}</div>
      </div>
    );
  };
  renderFooter = actions => {
    return (
      <div className={`${prefixCls}-toolbar`}>
        <ul>
          {actions.map((action, index) => {
            return (
              <li key={`action-${index}`}>
                {action.icon && <Icon name={action.icon} />}
                {action.text}
              </li>
            );
          })}
        </ul>
      </div>
    );
  };
  render() {
    const {
      title,
      data,
      // actions
    } = this.props;
    return (
      <div className={prefixCls}>
        {title && this.renderTitle(title)}
        <div className={`${prefixCls}-body`}>{this.renderComponent(data)}</div>
        {/*actions && actions.length && this.renderFooter(actions)*/}
      </div>
    );
  }
}
